Revision:
<h4>animated background colors</h4>
<style>
@keyframes colorMe {
0% { background: #33CCCC; }
20% { background: #33CC36; }
40% { background: #B8CC33; }
60% { background: #FCCA00; }
80% { background: #33CC36; }
100% { background: #33CCCC; }
}
.color_1 {background: #33CCCC; animation: colorMe 9s infinite linear; text-align: center;
padding: 2vw;}
h4 {text-align: center; font-family: 'Kavoon', sans-serif; font-size: 2.5vw; color: white;}
</style>
<div class=color-2>
<div class="bg_A"></div>
</div>
<style>
.bg_A{ width: 100%;height: 50vh; display: flex; align-items: center; justify-content: center;
background-size: 300% 300%;background-image: linear-gradient(-45deg, yellow 0%,
yellow 25%, yellow 51%, #ff357f 100%); -webkit-animation: AnimateBG 20s ease infinite;
animation: AnimateBG 20s ease infinite;}
@-webkit-keyframes AnimateBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
@keyframes AnimateBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%; }
}
</style>
<div class="color_4">
<div class="center">
<h4>Background Animation</h4>
</div>
</div>
<style>
/* @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200'); */
.color_4{width: 45vw; height: 80vh; background-image: url('../images/1.jpg');
background-size: cover; -webkit-animation: slidein 100s; animation: slidein 100s;
-webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;}
@-webkit-keyframes slidein {
from {background-position: top; background-size:3000px; }
to {background-position: -100px 0px;background-size:2750px;}
}
@keyframes slidein {
from {background-position: top;background-size:3000px; }
to {background-position: -100px 0px;background-size:2750px;}
}
.color_4.center{display: flex; align-items: center; justify-content: center; position: absolute;
margin: auto; top: 0; right: 0; bottom: 0;
left: 0; background: rgba(75, 75, 250, 0.3); border-radius: 3px;}
.center h4{ text-align:center; color:white; font-family: 'Source Code Pro', monospace;
text-transform:uppercase; }
</style>
<div class="color_5">
<div class="slider-thumb"></div>
</div>
<style>
.color_5 { height: 80vh; background: linear-gradient(90deg,#e52e71,#ff8a00);}
.slider-thumb::before {position: relative; content: ""; left: 20%; top: 5vw; width: 30vw;
height: 30vw; background: #17141d; border-radius: 62% 47% 82% 35% / 45% 45% 80%
66%; will-change: border-radius, transform, opacity;
animation: sliderShape 5s linear infinite; display: block; z-index: 1;
-webkit-animation: sliderShape 5s linear infinite; }
@keyframes sliderShape{
0%,100%{ border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform:
translate3d(0,0,0) rotateZ(0.01deg);}
34%{ border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform:
translate3d(0,5px,0) rotateZ(0.01deg); }
50%{ transform: translate3d(0,0,0) rotateZ(0.01deg);}
67%{border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ; transform:
translate3d(0,-3px,0) rotateZ(0.01deg);}
}
</style>
<div class="color_6">
<section>
<div class='air air1'></div>
<div class='air air2'></div>
<div class='air air3'></div>
<div class='air air4'></div>
</section>
</div>
<style>
.color_6 section{ position: relative; width: 100%; height: 60vh; background: #3586ff;
overflow: hidden; }
.color_6 section .air{position: absolute; bottom: 0; left: 0; width: 100%;
height: 100px; background: url(../images/wave.png); background-size: 1000px 100px;}
.color_6 section .air.air1{animation: wave 30s linear infinite; z-index: 1000;
opacity: 1; animation-delay: 0s; bottom: 0; }
.color_6 section .air.air2{ animation: wave2 15s linear infinite; z-index: 999;
opacity: 0.5; animation-delay: -5s; bottom: 10px;}
.color_6 section .air.air3{animation: wave 30s linear infinite; z-index: 998;
opacity: 0.2; animation-delay: -2s; bottom: 15px; }
.color_6 section .air.air4{ animation: wave2 5s linear infinite; z-index: 997;
opacity: 0.7; animation-delay: -5s; bottom: 20px; }
@keyframes wave{
0%{background-position-x: 0px;}
100%{background-position-x: 1000px; }
}
@keyframes wave2{
0%{background-position-x: 0px;}
100%{background-position-x: -1000px;}
}
</style>